<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
		
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css"/>
		<title>确认订单</title>
		<style type="text/css">
			.mui-bar{background:rgb(255,209,0);}
			.address{width: 90%;min-height: 25vh; border-radius: 20px;border: 1px solid black;margin: 1vh auto 1vh;background: rgb(255,209,0);padding: 5% 5%;}
			.address p{line-height: 32px;width: 90%;margin-bottom: 0px;color: black;}
			.address span{line-height: 32px;}
			.mui-media-body{padding-top: 1vh;}
			.mui-media-body > .goodtitle{width: 60%; word-wrap: break-word;word-break: break-all;text-overflow: ellipsis;overflow: hidden;color: black;}
			.mui-media-body > .goodprice{width: 30%;color: black;}
			#selectDispatch{background: rgb(255,209,0); border: 1px solid black; color: black; border-radius: 20px;}
			.payOrder{background:whitesmoke; border: 1px solid black;color: black;text-align: center;line-height: 100%;border-radius: 20px;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<span class="mui-icon mui-icon-back mui-pull-left"></span>
			<span class="mui-title">确认订单</span>
		</header>
		<div class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<div class="address">
					<span class=" mui-icon mui-icon-location mui-left"></span>
					<p class="mui-pull-right mation">收件人: 咦嘻嘻</p>
					<p class="mui-pull-right mation">联系电话: 15211430656</p>
					<p class="mui-pull-right mation">收货地址: 北京市 北京辖区 东城区 东城区西城 再来一个</p>
				</div>
				<div class="mui-table-view goodlist">
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;" class="mui-navigate-right">
							<img src="../images/attcment/76side.jpg" class="mui-media-object mui-pull-left"/>
							<div class="mui-media-body">
								<p class="mui-pull-left goodtitle">
									 英国原装进口Lebay/丽贝拉拉裤6号XXL码20片超薄干爽透气学步裤全国包邮          
								</p>
								<p class="mui-pull-left goodprice">
									<span class="mui-pull-right">单价: ¥120.00</span><br />
									<span class="mui-pull-right">&nbsp; × 1</span>
								</p>
							</div>
						</a>
					</li>
					
					<li class="mui-table-view-cell">
						<p style="text-align: right;">共计 1 件商品  合计: 2</p>
					</li>
					
					<li class="mui-table-view-cell">
						<input type="text" class="buyerneed" placeholder="选填!买家留言！" />
					</li>
					<li class="mui-table-view-cell">
						<span class="mui-pull-left">商品小计</span>
						<span class="mui-pull-right">¥ 100</span>
					</li>
					<li class="mui-table-view-cell" ms-controller="pageData">
						<span class="mui-pull-left">配送方式</span>
						<div id="selectDispatch" class="mui-btn">
							{{@dispatchName}}
						</div>
						<input type="hidden" ms-attr="{value:@dispatchVal}" class="dispatch" />
					</li>
					<li class="mui-table-view-cell">
						<span class="mui-pull-left">免邮</span>
						<span class="mui-pull-right">¥ 0.00</span>
					</li>
				</div>
			</div>
		</div>
		<footer class="mui-bar mui-bar-footer" style="border-top: 1px solid black;">
			<a href="javascript:;" class="mui-btn payOrder mui-pull-right">立即支付</a>
			<span class="mui-pull-right" style="height: 100%;line-height: 44px;">需付 : ¥ 105.00</span>
		</footer>
	</body>
	<script src="../js/avalon.js"></script>
	<script src="../js/mui.min.js"></script>
	<script src="../js/config.js"></script>
	<script src="../js/mui.picker.min.js"></script>
	<script>
		mui.init({
			swipeBack:true
		});
		
		mui.plusReady(function(){
			ws = plus.webview.currentWebview();
			wo = ws.opener();
			
			ws.show('zoom-fade-out');
			plus.nativeUI.closeWaiting();
			gid = ws.gid;
			total = ws.total;
			/*alert(gid);
			alert(total);*/
		});
		
		/**
		 * avalon 数据绑定器
		 * @param {Object,pageOnner} 页面内数据绑定VM
		 * @param {Object,pagesVM} 页面交互数据绑定VM
		 */
		var pageOnner = avalon.define({
			$id : 'pageData',
			dispatchName: '请选择快递',
			dispatchVal : ''
		});
		
		
		
		/**
		 * 点击跳转到收货地址管理页面
		 */
		var addr_btn = document.getElementsByClassName('address')[0];
		addr_btn.addEventListener('tap',function(){
			alert(1);
		});
		
		/**
		 * picker 快递选择器插件
		 */
		var showPicker = document.getElementById('selectDispatch');
		var dispatchPop = new mui.PopPicker();
		dispatchPop.setData([{value:'zt',text:'中通快递'},{value:'bs',text:'百世快递'}]);
		showPicker.addEventListener('tap',function(){
			dispatchPop.show(function(selectItem){
				pageOnner.dispatchName = selectItem[0].text;
				pageOnner.dispatchVal = selectItem[0].value;
			})
		});
		
		/**
		 * payOrder 立即支付事件 
		 * 生成订单 并获取订单号 订单金额
		 * @return  判断之后 跳转页面到支付页面 并传参[订单号]
		 */
		var payOrder = document.getElementsByClassName('payOrder')[0];
		payOrder.addEventListener('tap',function(){
			plus.nativeUI.showWaiting('努力加载，请稍等....');
			
			plus.webview.create('payOrder.html','payPrder.html',{},{orderssn:'2016665656565656',ordergold:'105.00'});
			
		});
	</script>
</html>
